<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Bootstrap</title>
    <script src="js/jquery.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url("picture/background1.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        

        .textour
        {
            
            position:absolute;
            top: 750px;
            margin-left: 800px;
            font-size: 96px;
            color: #C4EBAD;
            z-index: 2;
        }
        .textblue
        {
            
            position:absolute;
            top: 750px;
            margin-left: 900px;
            font-size: 96px;
            color: #00C2FF;
            z-index: 2;
        }
        .textplant
        {
            position:absolute;
            top: 885px;
            margin-left: 910px;
            font-size: 96px;
            color:white;
            z-index: 2;

        }
        .texttitle1
        {
            position:absolute;
            top: 1100px;
            color: black;
            margin-left: 260px;
            font-size: 64px;
        }
        .textcontent{
            position:absolute;
            top: 1350px;
            left: 380px;
            font-size: 27px;
            text-align: left;
            width: 860px;
        }
        .texttitle2{
            position: absolute;
            top: 2220px;
            left:300px;
            font-size: 27px;
            text-align: left;
            color: #063259;         
        }
        .textcontent2{
            position:absolute;
            top: 2290px;
            left:300px;
            font-size: 20px;
            text-align: left;
            color: #063259;
            width: 300px;
        }
        .textcontent3{
            position: absolute;
            left: 380px;
            top: 2800px;
            font-size: 27px;
            text-align: left;
            width: 860px;
        }

        
        .img1-1{
            position:absolute;
            top: 710px;
            left: 300px;
            width: 600px;
            height: 376px;
            z-index: 1;
            
        }
        .img1-2{
            position: absolute;
            top: 1886px;
            left:242px;
            width: 442px;
            height: 268px;
        }
        .img1-3{
            position: absolute;
            top: 1886px;
            left:710px;
            width: 280px;
            height: 268px;
            float: left;
        }
        .img1-4{
            position: absolute;
            top: 1886px;
            left:1010px;
            width: 280px;
            height: 268px;
        }
        .img1-5{
            position: absolute;
            top: 2200px;
            left:710px;
            width: 280px;
            height: 268px;
            float: left;
        }
        
        .img1-6{
            position: absolute;
            top: 2200px;
            left:1010px;
            width: 280px;
            height: 268px;
        }
        .hrr{
            position: absolute;
            top: 2270px;
            left:300px;
            width: 220px;
            border: 4px solid black;
            
        }
        .bordercube{
            position: absolute;
            top: 2200px;
            left:242px;
            width: 442px;
            height: 268px;
            border: 4px solid black; 
               
        }
        .whitecube{
            position:absolute;
            top: 710px;
            left: 217.5px;
            width: 1085px;
            height: 200px;
            background: white;
        }
        .bluelongcube
        {
            position:absolute;
            width: 920px;
            height: 297px;
            margin-left: 350px;
            top: 890px;
            background: #17B0C9;
            font-size: 27;
            color: #063259; 
        }
        .bluecube {
            position:absolute;
            width: 72px;
            height: 72px;
            top:750px;
            margin-left:180px;
            background: #18D4D8;
        }
        .yellowcube {
            position:absolute;
            top:680px;
            width: 105px;
            height: 105px;
            margin-left:230px;
            background: #F1E18F;
            z-index: 2;
        }
        .bluelongcube2
        {
            position:absolute;
            width: 740px;
            height: 120px;
            left: 380px;
            top: 2600px;
            background: #62B6B9;
            font-size: 60px;
            color: white;
        }

        .outer7 {
            display: flex;
            height: 710px;
        }

        .sidebar7 {
            flex: 0 0 150px;
            height: 710px;
            background: #0B293E;
        }

        .content7 {
            flex: 1;
            height: 710px;
        }

        ul {
            list-style-type: none;

            margin: 0;

            padding: 0;

        }



        a {

            display: block;

            background-color: #0B293E;

            color: white;

            width: 170px;

            text-align: center;

            padding: 30px;

            text-decoration: none;

        }

        a:hover,
        a:active {

            background-color: #1B4E73;

        }
    </style>
</head>

<body>
    <div class="outer7">
        <div class="sidebar7">
            <ul>

                <li><a href="1.html" class="text-white" >首页</a></li>

                <li><a href="2.html" class="text-white">白色污染</a></li>

                <li><a href="3.html" class="text-white">石油污染</a></li>

                <li><a href="4.html" class="text-white">过度捕捞</a></li>

                <li><a href="5.html"class="text-white">全球变暖</a></li>
                <br> <br> <br> <br> <br> <br> <br> <br>
                <li><a href="6.html"class="text-white">关于我</a></li>
                

            </ul>
            
        </div>
        
        <div class="content7">
            <div id="demo" class="carousel slide" data-ride="carousel">

                <!-- 指示符 -->
                <ul class="carousel-indicators text-center">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                    <li data-target="#demo" data-slide-to="3"></li>
                    <li data-target="#demo" data-slide-to="4"></li>
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="picture/slide1.jpg" width="1375" height="710">
                    </div>
                    <div class="carousel-item">
                        <img src="picture/slide2.jpg" width="1375" height="710">
                    </div>
                    <div class="carousel-item">
                        <img src="picture/slide3.jpg" width="1375" height="710">
                    </div>
                    <div class="carousel-item">
                        <img src="picture/slide4.jpg" width="1375" height="710">
                    </div>
                    <div class="carousel-item">
                        <img src="picture/slide5.jpg" width="1375" height="710">
                    </div>
                </div>

                <!-- 左右切换按钮 -->


            </div>
        </div>
        

    </div>
    <div class="whitecube"></div>
    <div>
        <img class="img1-1" src="picture/1-1.jpg" >
        <div class="yellowcube"></div>
        <div class="bluecube"></div>
        <div class="bluelongcube"></div>
        <div class="textour">Our</div>
        <div class="textblue">&nbsp&nbsp&nbspBlue</div>
        <div class="textplant">Plant</div>
        <div class="texttitle1"><b>海<br>洋<br>的<br>生<br>态<br>意<br>义</b></div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="textcontent">
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp因为地球海洋面积（约为3.6亿平方公里）远远大于陆地面积，故有人将地球称为一个“大水球”。<br>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp海洋生态系统对人类的作用巨大，其服务功能及其生态价值是地球生命支持系统的重要组成部分,也是社会与环境可持续发展的基本要素。<br>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp海洋维持了人类赖以生存的生命支持系统,维持生命物质的生物地化循环与水文循环,维持生物物种与遗传多样性,净化环境,维持大气化学的平衡与稳定海洋是地球上决定气候发展的主要的因素之一。<br>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp海洋本身就是地球表面最大的储热体。海流是地球表面最大的热能传送带。海洋与空气之间的气体交换（其中最主要的有水汽、二氧化碳和甲烷）对气候的变化和发展有特别大的影响。
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <img class="img1-2" src="picture/1-2.jpg">
    <img class="img1-3" src="picture/1-3.jpg">
    <img class="img1-4" src="picture/1-4.jpg">
    <img class="img1-5" src="picture/1-5.jpg">
    <img class="img1-6" src="picture/1-6.jpg">
    <div class="bordercube" ></div>
    <p class="texttitle2"><b>海洋的生物多样性</b></p>
    <div class="hrr"></div>
    <div class="textcontent2">生物是始终和环境构成相互作用的体系，彼此影响。海洋生物自然也和海洋独特的自然环境相适应。由于海洋环境和陆地环境的不同，二者形成的生物多样性也差异很大。</div>
    <div class="bluelongcube2"><p class="text-center" ><b>保护海洋的必要性</b></p></div>
    
    <p class="textcontent3">
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp海洋是一个完整的水体。海洋本身对污染物有着巨大的搬运、稀释、扩散、氧化、还原和降解等净化能力。但这种能力并不是无限的，当局部海域接受的有毒有害物质超过它本身的自净能力时，就会造成该海域的污染。海洋污染是一个国际性的问题。据不完全统计，世界上每年把1000万吨石油排入海洋；约有100万吨滴滴涕已滞留在海水中。保护海洋环境，防止海洋污染是各国的共同要求。海洋污染的特点是污染源广，有毒有害物质的种类多，扩散范围大，危害深远，控制复杂，治理难度大。因此，海洋污染比起陆上的其它环境污染要严重和复杂。
        <br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp海洋不仅能保障人类的食物来源，还为人类有宜居的生存坏境提供了保证，但目前看来海洋生态环境存在着诸多的问题，譬如白色污染、石油污染、过度捕捞和全球变暖带来的物种生存环境变化等，都急需人们去解决。
        本网站将针对以上常见海洋生态问题进行逐一介绍，让用户对海洋的生态意义和保护的必要性有一个初步的认知，引导启迪用户在生活中注意微小行为去为海洋生态保护贡献出一份自己的力量。
 </p>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
</body>

</html>